<template>
    <div>
      <van-nav-bar title="日历" left-arrow @click-left="onClickLeft" />
      <div class="content">
        <van-cell  title="选择日期区间"  :value = "date" @click="show=true"  />
        <van-calendar
            v-model="show"
            type="range"
            :formatter="formatter"
            :poppable="false"
           
            :style="{ height: '500px' }"
        />
        <!-- 

            @confirm = "onConfirm"
            confirm-text = "完成"
            confirm-disabled-text="请选择结束时间"
            color="#07C160"
           
         -->
      </div>
    </div>
  </template>
  
  <script>
  import { Calendar,NavBar ,Cell} from "vant";
  export default {
    data() {
      return {
        date: "",
        show: false,

      };
    },
    components: {
      [Calendar.name]: Calendar,
      [NavBar.name]: NavBar,
      [Cell.name]: Cell,
     
    },
    methods: {
        onClickLeft(){
            this.$router.go(-1)
        },
        onConfirm(date){
            console.log(date)
            const [start,end] = date;
            this.show = false;
            this.date = `${this.formDate(start)}-${this.formDate(end)}`
        },
        formDate(date){
            return `${date.getMonth()+1}/${date.getDate()}`
        },
        formatter(day){
            console.log(day)
            const  month = day.date.getMonth()+1;
            const  date = day.date.getDate();

            if (month === 9) {
                if (date === 10) {
                day.topInfo = '教师节';
                } else if (date === 11) {
                day.topInfo = '中秋节';
                } else if (date === 15) {
                day.text = '今天';
                }
            }

            if (day.type === 'start') {
                day.bottomInfo = '入住';
            } else if (day.type === 'end') {
                day.bottomInfo = '离店';
            }

            return  day
        }
    }
  };
  </script>
  
  
  <style lang="scss" scoped>
  
 
  </style>
